<template>
	<view class="add-vehicle">
		<!-- 顶部背景 -->
		<view class="header-bg"></view>
		
		<!-- 主要内容区 -->
		<view class="content-box">
			<!-- 顶部图片 -->
			<view class="image-box">
				<image src="../../../static/tinajiacheliang.png" mode="aspectFit"></image>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-box">
				<uni-forms :modelValue="formData" ref="form" :rules="rules">
					<!-- 车辆类型选择 -->
					<uni-forms-item label="车辆类型" required name="carType">
						<uni-data-select
							v-model="formData.carType"
							:localdata="vehicleTypes"
							placeholder="请选择车辆类型"
						></uni-data-select>
					</uni-forms-item>
					
					<!-- 车辆型号选择 -->
					<uni-forms-item label="车辆型号" required name="carModel">
						<uni-data-select
							v-model="formData.carModel"
							:localdata="vehicleModels"
							placeholder="请选择车辆型号"
						></uni-data-select>
					</uni-forms-item>
					
					<!-- 车牌号码输入 -->
					<uni-forms-item label="车牌号码" required name="carNumber">
						<uni-easyinput
							v-model="formData.carNumber"
							placeholder="请输入您的车牌号"
						/>
					</uni-forms-item>
					
					<!-- 车主姓名输入 -->
					<uni-forms-item label="车主姓名" required name="userName">
						<uni-easyinput
							v-model="formData.userName"
							placeholder="请输入您的姓名"
						/>
					</uni-forms-item>
					
					<!-- 联系电话输入 -->
					<uni-forms-item label="联系电话" required name="phonenumber">
						<uni-easyinput
							v-model="formData.phonenumber"
							type="number"
							placeholder="请输入您的手机号"
						/>
					</uni-forms-item>
					
					<!-- 照片上传 -->
					<uni-forms-item label="车辆照片" name="photos">
						<uni-file-picker
							v-model="formData.photo"
							fileMediatype="image"
							mode="grid"
							@select="select"
							@delete="deletePic"
							:limit="1"
						/>
					</uni-forms-item>
				</uni-forms>
				
				<!-- 提交按钮 -->
				<view class="submit-btn">
					<button type="primary" @click="submitForm">添加车辆</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				userData:{
					sysUserid:''
				},
				formData: {
					carType: '',
					carModel: '',
					carNumber: '',
					userId: 1,
					phonenumber: '',
					photo:'',
					userName:''
				},
				rules: {
					carType: {
						rules: [{
							required: true,
							errorMessage: '请选择车辆类型'
						}]
					},
					carModel: {
						rules: [{
							required: true,
							errorMessage: '请选择车辆型号'
						}]
					},
					carNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入车牌号码'
						}]
					},
					userId: {
						rules: [{
							required: true,
							errorMessage: '请输入车主姓名'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话'
						}, {
							pattern: /^1[3-9]\d{9}$/,
							errorMessage: '手机号码格式不正确'
						}]
					}
				},
				fileList: [],
				vehicleTypes: [
					{ text: '小型车', value: '1' },
					{ text: '中型车', value: '2' },
					{ text: '大型车', value: '3' }
				],
				vehicleModels: [
					{ text: '轿车', value: '1' },
					{ text: 'SUV', value: '2' },
					{ text: '货车', value: '3' }
				]
			}
		},
		methods: {
			
			// 图片选择回调
			select(e) {
				console.log('选择文件：', e)
			},
			// 删除图片
			deletePic(e) {
				console.log('删除文件：', e)
			},
			//清楚数据
			clean(){
				this.formData={
					carType: '',
					carModel: '',
					carNumber: '',
					userId: '',
					phonenumber: '',
					photo:'',
					userName:''
				}
			},
			
			// 提交表单
			submitForm() {
				let that =this
				this.$http({
					url:'/api/system/user/byuser',
					method:'get',
					data:that.formData,
					success(res){
					that.userData.sysUserid=res.data.data.userId
					}
				})
				this.$http({
					url:'/api/user/userr/bySysUser',
					method:'get',
					data:that.userData,
					success(res){
						that.formData.userId=res.data.data.Id
					}
				})
				
				this.$http({
					url:'/api/user/car',
					method:'post',
					data:that.formData,
					success(res){
						if(res.data.code==200){
							uni.showToast({
								title:'添加成功',
								duration:1000,
								icon:'success',
							})
							that.clean(),
							uni.navigateTo({
								url:'/pages/shihao/add-vehicle-ok/add-vehicle-ok'
							})
						
						} else{
							uni.showToast({
								title:'添加失败,请重新尝试',
								duration:1000,
								icon:'error'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.add-vehicle {
	/deep/ .uni-forms-item__label {
        display: inline-flex;  // 改为 inline-flex
        align-items: center;   // 垂直居中
        justify-content: center; // 水平居中
        background-color: #2E80FA;
        padding: 4rpx 20rpx;
        border-radius: 30rpx;
        color: white;
        font-size: 28rpx;
        white-space: nowrap;
        border: 2rpx solid #2E80FA;
        margin-right: 20rpx;
        min-width: 160rpx;    // 可选：设置最小宽度使所有标签宽度一致
        height: 50rpx;        // 可选：设置固定高度
    }
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.header-bg {
		background-color: #2E80FA;
		height: 260rpx;
		width: 100%;
	}
	
	.content-box {
		margin-top: -200rpx;
		padding: 30rpx;
		
		.image-box {
			text-align: center;
			background-color: white;
			border-radius: 15rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			image {
				width: 70%;
				height: 200rpx;
			}
		}
		
		.form-box {
			background-color: white;
			border-radius: 15rpx;
			padding: 30rpx;
			
			.submit-btn {
				margin-top: 40rpx;
			}
		}
	}

}
</style>